import styles from "./css/Home.module.css";
import { useEffect, useState } from "react";
import { dishList, likeDish, collectDish } from "./service";
import { SearchOutline, MoreOutline, CloseOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
import { ProductCard, Tag, Button, List, PullRefresh } from 'react-vant';
import Card from "./Card";

export default function () {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);
  const [finished, setFinished] = useState(false);
  const [wait, setWait] = useState(false);

  const loadData = async (up = false) => {
    setFinished(false);
    let { data } = await dishList({ pageNum: page, pageSize: 15 });
    console.log(data);
    if (list.length < data.total) {
      if (up) {
        setList([...data.rows, ...list])
      } else {
        setList([...list, ...data.rows])
      }
      setPage(page + 1)
    }
    setFinished(true)
  };

  // useEffect(() => {
  //   loadData()
  // }, [])

  const handleLike = state => async (id) => {
    if (wait) {
      return
    }
    try {
      setWait(true);
      console.log(id, !state)
      await likeDish({ dishesId: id, newState: !state }).then(() => {
        setList(list.map(item => {
          if (item.id === id) {
            if (!item.myLikeState) {
              item.likeCount += 1;
              item.myLikeState = true;
            } else {
              item.likeCount -= 1;
              item.myLikeState = false;
            }
          }
          setWait(false)
          return item
        }))
      });
    } catch (e) {
      console.error(e)
    }
  }
  const handleCollect = state => async (id) => {
    if (wait) {
      return
    }
    setWait(true);
    try {
      await collectDish({ dishesId: id, newState: !state }).then(() => {
        setList(list.map(item => {
          if (item.id === id) {
            if (!item.myCollectionState) {
              item.collectionCount += 1;
              item.myCollectionState = true;
            } else {
              item.collectionCount -= 1;
              item.myCollectionState = false;
            }
          }
          return item
        }))
      });
    } catch (e) {
      console.error(e)
    } finally {
      setWait(false)
    }
  }

  return (
    <div style={{
      backgroundColor: "#f1f2f3",
    }}>


      <PullRefresh onRefresh={async () => await loadData(true)} >
        <List finished={finished} onLoad={async () => {
          console.log("到底了");
          await loadData();
        }}
        >
          <div style={{
            columnCount: 2,
            columnGap: "10px",
            columnFill: "balance",
          }}>
            {list.map(item => {
              return (
                <Card
                  dish={item}
                  key={item.id}
                  onLike={handleLike(item.myLikeState)}
                  onCollect={handleCollect(item.myCollectionState)}
                />
              )
            })}
          </div>
        </List>
      </PullRefresh>
    </div >
  )
}